<template>
	<div class="nature_box">
		<el-form label-width="130px">
			<el-form-item label="名称">
				<el-input v-model="nature_name"></el-input>
			</el-form-item>
			<el-form-item label="用水性质类型">
				<el-radio-group v-model="charge_nature_type" :disabled = "charge_project_list.length > 0">
					<el-radio label=1>普通</el-radio>
					<el-radio label=2>比例混合</el-radio>
					<el-radio label=3>定量混合</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="charge_nature_remark"></el-input>
			</el-form-item>
			<div v-if="charge_nature_type == 1">
				<div class="project_list" v-for="(item,index) in charge_project_list" :key="index">
					<div class="project_title">{{ item.charge_project_name }}</div>
					<el-form-item label="单价">
						<el-input v-model="item.charge_nature_ord_price"></el-input>
					</el-form-item>
					<el-form-item label="阶梯类型">
						<el-radio-group v-model="item.charge_nature_ord_type" :disabled="item.child_list.length > 0">
							<el-radio label=1>无阶梯</el-radio>
							<el-radio label=2>月阶梯</el-radio>
							<el-radio label=3>年阶梯</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="阶梯阈值核算方式">
						<el-radio-group v-model="item.charge_nature_ord_configure_type"
										:disabled="item.charge_nature_ord_type ==1 || item.child_list.length > 0">
							<el-radio label=1>按水量</el-radio>
							<el-radio label=2>按比例</el-radio>
							<el-radio label=3>按用水人数</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="计费方式">
						<el-radio-group v-model="item.charge_nature_ord_price_type">
							<el-radio label=1>实际水量</el-radio>
							<el-radio label=2>固定水量</el-radio>
							<el-radio label=3>按用水人数固定数量</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="固定水量" v-if="item.charge_nature_ord_price_type == 2">
						<el-input v-model="item.charge_nature_ord_fixed_vol" placeholder="请输入固定水量（吨）"></el-input>
					</el-form-item>
					<el-form-item label="起征水量" v-if="item.charge_nature_ord_price_type == 3">
						<el-input v-model="item.charge_nature_ord_start_vol" placeholder="请输入起征水量（吨）"></el-input>
					</el-form-item>
					<div class="project_item row" v-for="(items,indexs) in item.child_list" :key="indexs">
						<div class="project_item_line row">
							<div class="project_item_line_title">阶梯名称：</div><el-input v-model="items.charge_nature_ladder_name" :disabled="true"></el-input>
						</div>
						<div class="project_item_line row">
							<div class="project_item_line_title">阶梯等级：</div><el-input v-model="items.charge_nature_ladder_level" :disabled="true"></el-input>
						</div>
						<div class="project_item_line row" v-if="item.charge_nature_ord_configure_type == 1">
							<div class="project_item_line_title">水量：</div><el-input v-model="items.charge_nature_ladder_water" placeholder="请输入水量（吨）"></el-input>
						</div>
						<div class="project_item_line row" v-if="item.charge_nature_ord_configure_type == 2">
							<div class="project_item_line_title">比例值：</div><el-input v-model="items.charge_nature_ladder_ratio" placeholder="请输入比例系数"></el-input>
						</div>
						<div class="project_item_line row" v-if="item.charge_nature_ord_configure_type == 3">
							<div class="project_item_line_title">月人均水量：</div><el-input v-model="items.charge_nature_ladder_unit" placeholder="请输入水量（吨）"></el-input>
						</div>
						<div class="project_item_line row">
							<div class="project_item_line_title">单价：</div><el-input v-model="items.charge_nature_ladder_price" placeholder="请输入金额（元）"></el-input>
						</div>
						<div class="project_item_line row">
							<i class="el-icon-delete" style="font-size: 40px;color: red;margin-left: 10px;" @click="delChild(index,indexs)"></i>
						</div>
					</div>
					<el-form-item>
						<el-button type="primary" @click="addChild(index)" :disabled="item.charge_nature_ord_type ==1">点击新增阶梯配置</el-button>
					</el-form-item>
				</div>
				<el-form-item>
					<el-checkbox-group v-model="charge_project_index_list" @change="changeChooseProjectList">
						<el-checkbox :label="index" v-for="(item,index) in projectList" :key="index"  border>
							{{ item.charge_project_name }}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</div>
			<div v-if="charge_nature_type == 2">
				<div class="project_item project_item2 row" v-for="(item,index) in charge_nature_ratio_list" :key="index">
					<div class="project_item_line row">
						<div class="project_item_line_title">用水性质：</div>
						<el-select v-model="item.charge_nature_ratio_relation_id" placeholder="请选择要混合的用水性质">
							<el-option
								v-for="item in choose_nature_list"
								:key="item.choose_nature_id"
								:label="item.choose_nature_name"
								:value="item.choose_nature_id">
							</el-option>
						</el-select>
					</div>
					<div class="project_item_line row">
						<div class="project_item_line_title">占比（%）：</div><el-input v-model="item.charge_nature_ratio_vol" placeholder="请输入占比值"></el-input>
					</div>
					<div class="project_item_line row">
						<i class="el-icon-delete" style="font-size: 40px;color: red;margin-left: 10px;" @click="delNatureRatioList(index)"></i>
					</div>
				</div>
				<el-form-item>
					<el-tooltip class="item" effect="dark" content="所有用水性质占比值之和应为100%" placement="right">
						<el-button type="primary" @click="addNatureRatioList">添加比例混合用水性质</el-button>
					</el-tooltip>
				</el-form-item>
			</div>
			<div v-if="charge_nature_type == 3">
				<div class="project_item project_item2 row" v-for="(item,index) in charge_nature_ration_list" :key="index">
					<div class="project_item_line row">
						<div class="project_item_line_title">用水性质：</div>
						<el-select v-model="item.charge_nature_ration_relation_id" placeholder="请选择要混合的用水性质">
							<el-option
								v-for="item in choose_nature_list"
								:key="item.choose_nature_id"
								:label="item.choose_nature_name"
								:value="item.choose_nature_id">
							</el-option>
						</el-select>
					</div>
					<div class="project_item_line row">
						<div class="project_item_line_title">水量（吨）：</div><el-input v-model="item.charge_nature_ration_vol" placeholder="请输入水量值（吨）"></el-input>
					</div>
					<div class="project_item_line row">
						<el-switch v-model="item.charge_nature_ration_last" @change="doChangNatureRationLast(index)" data-index="index" active-text="剩余水量使用该用水性质计费" style="margin:10px;"></el-switch>
					</div>
					<div class="project_item_line row">
						<i class="el-icon-delete" style="font-size: 40px;color: red;margin-left: 10px;" @click="delNatureRationList(index)"></i>
					</div>
				</div>
				<el-form-item>
					<el-button type="primary" @click="addNatureRationList">添加定量混合用水性质</el-button>
				</el-form-item>
			</div>
			<el-form-item>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	props: {},
	data() {
		return {
			nature_name: '',
			charge_nature_type: '1',
			charge_nature_remark: '',
			charge_project_list: [],
			charge_project_index_list: [],
			projectList: [
				{
					charge_project_id: 1,
					charge_project_name: '基本水费',
					charge_nature_ord_price: '',
					charge_nature_ord_type: '1',
					charge_nature_ord_configure_type: '1',
					charge_nature_ord_price_type: '1',
					charge_nature_ord_fixed_vol: '',
					charge_nature_ord_start_vol: '',
					child_list: [],
				},
				{
					charge_project_id: 2,
					charge_project_name: '垃圾处理费',
					charge_nature_ord_price: '',
					charge_nature_ord_type: '1',
					charge_nature_ord_configure_type: '1',
					charge_nature_ord_price_type: '1',
					charge_nature_ord_fixed_vol: '',
					charge_nature_ord_start_vol: '',
					child_list: [],
				},
				{
					charge_project_id: 3,
					charge_project_name: '污水处理费',
					charge_nature_ord_price: '',
					charge_nature_ord_type: '1',
					charge_nature_ord_configure_type: '1',
					charge_nature_ord_price_type: '1',
					charge_nature_ord_fixed_vol: '',
					charge_nature_ord_start_vol: '',
					child_list: [],
				}, {
					charge_project_id: 4,
					charge_project_name: '阶梯水费',
					charge_nature_ord_price: '',
					charge_nature_ord_type: '1',
					charge_nature_ord_configure_type: '1',
					charge_nature_ord_price_type: '1',
					charge_nature_ord_fixed_vol: '',
					charge_nature_ord_start_vol: '',
					child_list: [],
				}
			],
			charge_nature_ladder_item: {
				charge_nature_ladder_name: '1阶梯',
				charge_nature_ladder_level: '1',
				charge_nature_ladder_water: '',
				charge_nature_ladder_ratio: '',
				charge_nature_ladder_unit: '',
				charge_nature_ladder_price: '',
			},
			choose_nature_list:[{
				choose_nature_id:1,
				choose_nature_name:'用水性质1',
			},{
				choose_nature_id:2,
				choose_nature_name:'用水性质2',
			}],
			charge_nature_ratio_list:[],
			charge_nature_ratio_item:{
				charge_nature_ratio_relation_id:'',
				charge_nature_ratio_vol:'',
			},
			charge_nature_ration_list:[],
			charge_nature_ration_item:{
				charge_nature_ration_relation_id:'',
				charge_nature_ration_vol:'',
				charge_nature_ration_last:false,
			}
		};
	},
	watch: {},
	computed: {},
	created() {
	},
	mounted() {
		this.getProjectList();
		this.getNatureList();
	},
	methods: {
		getProjectList(){
			var that = this;
			var apiUrl = 'get_charge_project_list';
			var apiParams = {};
			$.get(apiUrl,apiParams,function (res){
				console.log()
			},'json')
		},
		// 添加阶梯
		addChild(index){
			var that = this;
			console.log(that.charge_project_list)
			var child_length = that.charge_project_list[index].child_list.length;
			var child_next = parseInt(child_length) + parseInt(1);
			var charge_nature_ladder_item = JSON.parse(JSON.stringify(that.charge_nature_ladder_item));
			charge_nature_ladder_item.charge_nature_ladder_name = child_next+'阶梯';
			charge_nature_ladder_item.charge_nature_ladder_level = child_next;
			that.charge_project_list[index].child_list.push(charge_nature_ladder_item);
		},
		// 删除阶梯
		delChild(index,indexs){
			var that = this;
			var child_length = that.charge_project_list[index].child_list.length;
			if(indexs != parseInt(child_length) - parseInt(1)){
				that.$message.error('请从最后一个阶梯开始删除');
				return false;
			}
			that.charge_project_list[index].child_list.splice(indexs,1)
		},
		// 选择水费项目
		changeChooseProjectList(e) {
			var that = this;
			var charge_project_list = [];
			var charge_project_index_list = that.charge_project_index_list.sort();
			if (charge_project_index_list.length > 0) {
				for (var i = 0; i < charge_project_index_list.length; i++) {
					var charge_project_item = that.projectList[charge_project_index_list[i]];
					// charge_project_item.child_list.push(that.charge_nature_ladder_item)
					// console.log(charge_project_item)
					charge_project_list.push(charge_project_item);
				}
			}
			that.charge_project_list = charge_project_list;
		},
		// 新增比例混合
		addNatureRatioList(){
			var that = this;
			that.charge_nature_ratio_list.push(JSON.parse(JSON.stringify(that.charge_nature_ratio_item)));
		},
		// 删除比例混合
		delNatureRatioList(index){
			var that = this;
			that.charge_nature_ratio_list.splice(index,1)
		},
		// 新增定量混合
		addNatureRationList(){
			var that = this;
			that.charge_nature_ration_list.push(JSON.parse(JSON.stringify(that.charge_nature_ration_item)));
		},
		// 删除定量混合
		delNatureRationList(index){
			var that = this;
			that.charge_nature_ration_list.splice(index,1)
		},
		doChangNatureRationLast(index){
			var that = this;
			if(that.charge_nature_ration_list[index].charge_nature_ratio_item)
			console.log(index)
		},
		submitForm(){
			var that = this;
			var apiUrl = '';
			console.log(that)
			var apiParams = {

			};
		},
	},
};
</script>
<style>
.nature_box {
	width: 100%;
	padding: 3%;
	background: #fff;
}

.row {
	display: flex;
}

.project_list {
	width: 100%;
}

.project_title {
	font-size: 30px;
	margin: 55px 0 20px;
}
.project_item{
	justify-content: flex-start;
	margin:1% 3%;
}
.project_item2{
	margin:1% 1.7%!important;
}
.project_item_line{
	height: 40px;
	line-height: 40px;
}
.project_item_line_title{
	width: 100px;
	text-align: right;
}
</style>